<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的组件开发非单文件组件</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<div id="app">
    <student></student>
    <school></school>
</div>


<script>

    // 学生组件
    const student = {
        template: `
            <div style="width: 300px;height: 250px;border: 1px solid red; margin-bottom: 10px;">
                <h1>{{info}}</h1>
                <p>学生姓名:{{studentName}}</p>
                <p>学生年龄:{{age}}</p>
                <p>学生专业:{{major}}</p>
            </div>
        `,
        data() {   // 组件中使用data  需要使用data函数形式 让组件中都拥有独立的data数据
            return {
                info: '学生信息展示',
                studentName: "tom",   //  通过this关键词可以直接访问在props中声明的参数
                age: 20,
                major: 'Java开发'
            }
        }
    }

    // 定义一个学校组件
    const school = {
        template: `
            <div style="width: 300px;height: 250px;border: 1px solid red; margin-bottom: 10px;">
                <h1>学校信息展示</h1>
                <p>学校名字:kgc</p>
                <p>学校地址:安徽合肥</p>
                <p>学生数量{{numbers}}</p>
            </div>
        `,
        data() {
            return {
                numbers: 20
            }
        }
    }

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            student, school
        }
    })

</script>
</body>
</html>
